import React, { useState } from 'react';
import { Row, Col, Form, Input, Tooltip, Select } from 'antd';
import { DownOutlined, RightOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import _ from 'lodash';
import { useTranslation } from 'react-i18next';
import InputGroupWithFormItem from '@/components/InputGroupWithFormItem';
import UnitPicker from '@/pages/dashboard/Components/UnitPicker';

interface IProps {
  span?: number;
  prefixField?: any;
  prefixName?: (string | number)[];
  disabled?: boolean;
  mode: 'graph' | 'table';
  expanded?: boolean;
  expandTriggerVisible?: boolean;
}

function AdvancedSettings(props: IProps) {
  const { t } = useTranslation('db_tdengine');
  const { span = 6, prefixField = {}, prefixName = [], disabled, mode, expandTriggerVisible = true } = props;
  const [open, setOpen] = useState(!!props.expanded);

  return (
    <div data-oid='2rb2461'>
      {expandTriggerVisible && (
        <div style={{ marginBottom: 8 }} data-oid='rs6mr3f'>
          <span
            onClick={() => {
              setOpen(!open);
            }}
            style={{ cursor: 'pointer' }}
            data-oid='lr1hp0m'
          >
            {open ? <DownOutlined data-oid='6fp3ywn' /> : <RightOutlined data-oid='cogwpm0' />} {t('query.advancedSettings.title')}
          </span>
        </div>
      )}
      <div style={{ display: open ? 'block' : 'none' }} data-oid='d6fw405'>
        <Row gutter={8} data-oid='9oh3007'>
          {mode === 'graph' && (
            <>
              <Col span={span} data-oid='tsed0vt'>
                <InputGroupWithFormItem
                  label={
                    <span data-oid='kyxqm1m'>
                      MetricKey{' '}
                      <Tooltip title={t('query.advancedSettings.metricKey_tip')} data-oid='rt-epra'>
                        <QuestionCircleOutlined data-oid='g-3_qn:' />
                      </Tooltip>
                    </span>
                  }
                  labelWidth={100}
                  data-oid=':859c5r'
                >
                  <Form.Item {...prefixField} name={[...prefixName, 'keys', 'metricKey']} style={{ width: '100%' }} data-oid='w3-i:8i'>
                    <Select mode='tags' placeholder={t('query.advancedSettings.tags_placeholder')} disabled={disabled} open={false} data-oid='5fqrv_v' />
                  </Form.Item>
                </InputGroupWithFormItem>
              </Col>
              <Col span={span} data-oid='jej39bw'>
                <InputGroupWithFormItem
                  label={
                    <span data-oid='8hm-rop'>
                      LabelKey{' '}
                      <Tooltip title={t('query.advancedSettings.labelKey_tip')} data-oid='ektc9ol'>
                        <QuestionCircleOutlined data-oid='7.s5q1f' />
                      </Tooltip>
                    </span>
                  }
                  labelWidth={100}
                  data-oid='h1fb76m'
                >
                  <Form.Item {...prefixField} name={[...prefixName, 'keys', 'labelKey']} style={{ width: '100%' }} data-oid='gaiab6c'>
                    <Select mode='tags' placeholder={t('query.advancedSettings.tags_placeholder')} disabled={disabled} open={false} data-oid='lux2yjr' />
                  </Form.Item>
                </InputGroupWithFormItem>
              </Col>
              <Col span={span} data-oid='o_lc7ek'>
                <InputGroupWithFormItem label={t('common:unit')} data-oid='y4l5ww9'>
                  <Form.Item {...prefixField} name={[prefixField.name, 'unit']} initialValue='none' noStyle data-oid='ds13d71'>
                    <UnitPicker optionLabelProp='cleanLabel' style={{ width: '100%' }} dropdownMatchSelectWidth={false} data-oid=':54c5bg' />
                  </Form.Item>
                </InputGroupWithFormItem>
              </Col>
            </>
          )}
          {mode === 'table' && (
            <Col span={span} data-oid='7n4ubaa'>
              <InputGroupWithFormItem
                label={
                  <span data-oid='_pspap:'>
                    TimeFormat{' '}
                    <Tooltip title={t('query.advancedSettings.timeFormat_tip')} data-oid='drnek39'>
                      <QuestionCircleOutlined data-oid='qk29phf' />
                    </Tooltip>
                  </span>
                }
                data-oid='nkv1d.s'
              >
                <Form.Item {...prefixField} name={[...prefixName, 'keys', 'timeFormat']} style={{ width: '100%' }} initialValue='2006-01-02T15:04:05' data-oid='06chfm4'>
                  <Input disabled={disabled} data-oid='h7h4zs2' />
                </Form.Item>
              </InputGroupWithFormItem>
            </Col>
          )}
        </Row>
      </div>
    </div>
  );
}

export default AdvancedSettings;
